<template>
  <main class="homeView">
    <section class="left-content">
      <div class="logo-box">
        <img src="../../assets/images/logo.png" alt="logo">
        <div>FLAME</div>
      </div>
      <el-menu :default-active="defaultCurrent" class="el-menu-vertical-demo" @select="cilckMenuOpen">
        <el-sub-menu :index="menuitem.menuFolderId" v-for="menuitem in menuList" :key="menuitem.menuFolderId">
          <template #title>
            <i :class="menuitem.menuIcon" style="margin-right:10px"></i>
            <span>{{ menuitem.menuName }}</span>
          </template>
          <el-menu-item :index="menuchild.menuFolderId" v-for="menuchild in menuitem.children"
            :key="menuitem.menuFolderId">
            <template #title>
              <span>{{ menuchild.menuName }}</span>
            </template>
            <el-menu-item :index="menugrand.menuFolderId" v-for="menugrand in menuchild.children"
              :key="menuitem.menuFolderId">
              <template #title>
                <span>{{ menugrand.menuName }}</span>
              </template>
            </el-menu-item>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </section>
    <section class="right-content">
      <div class="page-header">
        <div class="page-url-icon">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: item.menuUrl }" v-for="item in state.patharylist" :key="item.C_id">{{
              item.menuName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="page-tab">
          <el-tag v-for="tag in state.tags" :key="tag.menuName" closable style="cursor: pointer;"
            @click="openTagsPage(tag)" :type="tag.type">
            {{ tag.menuName }}
          </el-tag>
        </div>
      </div>
      <div class="page-main-content">
        <RouterView name="page" />
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import axios from "axios"
import { ref, reactive } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { setInitMenuCurrent, folderIdToObj } from "./homeTool"
import { type menuClass } from "@/interface/index";

import { menuStorePinia } from '@/stores/currentMenu';
const menuStore = menuStorePinia();

let contentHeight = ref(0);
let router = useRouter();
let menuList = reactive([] as menuClass[]),
  defaultCurrent = ref(""),
  state = reactive({
    patharylist: [] as menuClass[],
    tags: [] as menuClass[]
  })
/*获取菜单数据*/
axios.post("/api/getmenu", {
})
  .then(response => {
    let data = response.data;
    if (data.code == "200") {
      menuList = data.data;
      let obj = setInitMenuCurrent(menuList);
      cilckMenuOpen(obj.curr, obj.pathary);
    } else {
      alert("菜单查询出错！");
    }
  })
  .catch(error => {
    alert((error.response && error.response.data.message) || "系统错误");
    // router.push({path:"/login"});
  });

/**
 * 点击菜单设置参数
*/
const cilckMenuOpen = (menuid: string, indexPath: Array<string>) => {
  defaultCurrent.value = menuid
  let curmenuobj = folderIdToObj(menuid, indexPath, menuList)
  state.patharylist = curmenuobj.pathary;
  let currtagMenu: any;
  if (state.tags.length > 0) {
    currtagMenu = state.tags.find((item: any) => item.C_id === curmenuobj.curr.C_id)
  }
  if (!currtagMenu) {
    const newItem: menuClass = {
      ...(curmenuobj.curr as menuClass),
      type: "primary"
    }
    state.tags.push(newItem);
  }
  router.push({
    path: curmenuobj.curr.menuUrl
  })
}

const openTagsPage = (val: menuClass) => {
  router.push({
    path: val.menuUrl
  })
}
</script>

<style scoped>
.homeView {
  display: flex;
  height: 100%;
}

.logo-box {
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
  background: #fff;
}

.logo-box>img {
  width: 46px;
  height: auto;
}

.logo-box>div {
  color: #ff6600;
  font-size: 36px;
  font-weight: 600;
  margin-left: 10px
}

.left-content {
  width: 180px;
  height: 100%;
  border-right: 1px solid var(--el-menu-border-color);
}

.left-content>ul {
  border: 0;
  user-select: none;
}

.right-content {
  flex: 1;
  height: 100%;
}

.right-content .page-header {
  padding-left: 20px;
  height: 66px;
  border-bottom: 1px solid #ddd;
}

.right-content .page-url-icon {
  height: 36px;
  display: flex;
  align-items: center;
}

.right-content .page-tab {
  height: 30px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.page-main-content {
  height: calc(100% - 66px);
}
</style>